<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户详情</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/selectY/selectY.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/webuploader/webuploader.css"/>
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
	@page {	
	 	/*size: portrait; /*纵向 */
				/*size: landscape; /* 横向 */
		/* size: auto; auto is the initial value */
		/* this affects the margin in the printer settings */
		/* 
		上外边距是 0mm
		右外边距是 10mm
		下外边距是 0mm
		左外边距是 10mm
		*/
		margin: 0mm 10mm 10mm 10mm;
	}
	.specification {
		display: inline-block;
	}
	.specification .nav-container {
		
	}
	.nav-container .item {
		float: left;
		padding: 5px;
		border: 1.5px solid #d2d2d2;
		margin: 5px;
		width: 120px;
		line-height: 16px;
		text-align: center;
		cursor: pointer;
		box-shadow: 0 5px 10px #c9c9c9;
	}
	
	.nav-container .item.active {
		border: 2px solid #00c1de;
	}
	
	.search-specification-btn {
		padding: 5px;
		margin: 5px;
		width: 140px;
		line-height: 50px;	
		text-align: center;
		display: inline-block;
		background-color: #00c1de;
		color: #fff;
		cursor: pointer;
	}
	
	.search-specification-btn :hover {
		color: #fff;
	}
	
	.photo-file {
		min-width: 1200px;
	}
	
	.photo-container .item {
		float: left;
		width: 280px;
		text-align: center;
		border: 1px solid #ddd;
		padding: 5px;
		margin: 0px 20px;
		height: 480px;	
		box-shadow: 0 5px 10px #c2c2c2;
	}
	
	.pictures-container {
		height: 300px;
	    width: 64%;
	    border: 1px dashed #d2d2d2;
	    margin: auto;
		padding-top: 10px;
	}	
	
	.upload-pictures-btn {
		margin: 5px;
		width: 140px;
		line-height: 34px;
		text-align: center;
		display: inline-block;
		background-color: #00c1de;
		color: #fff;
		cursor: pointer;
	}
	
	.print-pictures-btn {
		margin: 5px;
		width: 140px;
		line-height: 34px;
		text-align: center;
		display: inline-block;
		background-color: #00c1de;
		color: #fff;
		cursor: pointer;
	}
	
	.print-pictures-container {
		display: inline-block;
	}
	
	.print-pictures-container .item {
		float: left;
	    margin: 2.5px;
	}
	.webuploader-pick {	
		border: none;
		color: #fff;
		background: #00b7ee;
		margin: 0;
		width: 100%; 
	}
	.create-container{
		height: 300px;
	    width: 82%;
	    border: 1px dashed #d2d2d2;
	    margin: auto;
		padding-top: 10px;
	}
	.download-pictures-btn{
		margin: 5px;
	    width: 140px;
	    line-height: 34px;
	    text-align: center;
	    display: inline-block;
	    background-color: #ff5722;
	    color: #fff;
	    cursor: pointer;
	}
	.download-pictures-btn:hover {
		color: #fff;
	}
	.layui-form-radio{
	    padding-right: 0px;	
	}
	.layui-form-item{
		 margin-bottom: 0px;	
	}	
	.arrange-preview-btn{	
		margin: 5px;
	    width: 140px;
	    line-height: 34px;
	    text-align: center;
	    display: inline-block;
	    background-color: #00c1de;
	    color: #fff;
	    cursor: pointer;
	}
	.item.specification p{
		font-size: 16px;
	}
	</style>
</head>
<body class="body-container">	
	<div class="layui-fluid">

		<fieldset class="layui-elem-field layui-field-title">
			<legend>证件照制作</legend>
		</fieldset>
		<!-- 规格 -->
		<div class="specification">
			<ul class="nav-container">
				<li class="item active" count="9" width="25" height="35" spec="1">
					<p>一寸</p>
					<p>25 * 35 mm</p>
					<p>295 * 413px</p>
				</li>
				<li class="item" count="6" width="33" height="48" spec="3">
					<p>大一寸</p>
					<p>33 * 48 mm</p>
					<p>390 * 567 px</p>
				</li>
				<li class="item" count="4" width="35" height="49" spec="4">
					<p>二寸</p>
					<p>35 * 49 mm</p>
					<p>413 * 579 px</p>
				</li>
				<li class="item" count="4" width="35" height="45" spec="5">
					<p>小二寸</p>
					<p>35 * 45</p>
					<p>413 * 531 px</p>
				</li>	
				<li class="item" count="9" width="25" height="35" spec="72">
					<p>社保证</p>
					<p>30 * 40 mm</p>
					<p>358 * 441px</p>
				</li>
				<li class="item" count="9" width="25" height="35" spec="25">
					<p>健康证</p>
					<p>25 * 35 mm</p>
					<p>295 * 413px</p>
				</li>
			</ul>
			<!-- <a class="search-specification-btn">查看更多</a> -->
		</div>	

		<fieldset class="layui-elem-field layui-field-title">
			<legend>文件</legend>
		</fieldset>
		<div class="photo-file">
			<ul class="photo-container">
				<li class="item" style="width: 330px;">
					<h2>上传原图</h2>
					<div class="pictures-container">
					</div> 	
					<form class="layui-form" action="">
					  <div class="layui-form-item ">
					     	<div id="filePicker" class="upload-pictures-btn ">导入照片</div>
						 <div class="layui-inline ">
					     <div class="layui-input-inline">
					     </div>
					  	 </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label" style="width: 86px;">证件照背景色</label>
					    <div class="layui-input-block">
					      <input type="radio" name="bgColor" value="blue" title="蓝底" checked="">
					      <input type="radio" name="bgColor" value="red" title="红底">
					      <input type="radio" name="bgColor" value="white" title="白底">
					    </div>
					  </div>
					</form>
					
				</li>
				
				<li class="item">
					<h2>生成证件照</h2>
					<div class="create-container">
						
					</div>	
					<form class="layui-form" action="">
						<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">	
							<a class="arrange-preview-btn">预览</a>		
							</div>
						</div>
						</div> 		
						<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">
							<a class="print-pictures-btn">打印</a>
							</div>
						</div>
						</div>
					  	<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">
							<a class="download-pictures-btn">下载</a>	
							</div>
						</div>
						</div> 	
					</form>	
				</li>	
				<li class="item specification">
					<!-- <form class="layui-form" action="">
						<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">	
							<a class="arrange-preview-btn">预览排版</a>	
							</div>
						</div>
						</div> 	
					</form>	 -->	
					<h2 style="margin-bottom: 10px;">证件照操作说明：</h2>	
					<p style="overflow: inherit;text-align: start;">1、证件照拼版尺寸为5寸，不论纸张</p>	
					<p>尺寸多大，打印尺寸请选择5寸无</p>	
					<p style="margin-bottom: 5px;text-align: start; margin-left: 24px;">边距打印。</p>
					<p style="overflow: inherit;text-align: start;">2、请使用系统对话框进行打印设置，</p>
					<p>不要修改和设置浏览器自带的打</p>	
					<p style="margin-bottom: 5px;text-align: start; margin-left: 24px;">印设置。</p>
					<p style="overflow: inherit;text-align: start;margin-bottom: 5px;">3、打印设置时请采用横式打印。</p>	
				</li>	
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript" src="/static/jquery/jquery-2.1.1.min.js"></script>
<script src="/static/layui/layui.all.js" type="text/javascript"></script>
<script src="/static/plugins/webuploader/webuploader.js" type="text/javascript"></script>
<script src="/static/plugins/print/print.js" type="text/javascript"></script>
<script type="text/javascript">
	//预览图片
	var previewRotate = 0;
	// 证件照
	var idphotoUrl = "";
	// 证件照拼版	
	var arrangeUrl = "";		
	$(function () {	
		// 初始化上传
		initWebUploader()
	})
	
	// 下载  
	$(document).on('click', '.download-pictures-btn', function() {
		if(!arrangeUrl){
			layer.msg("请上传原图");	
			return false;
		}		
		layer.confirm('确定下载证件排版吗？',{title:'提示信息'}, function(index){
			// 下载				
			window.location.href = '/download/photoMake?arrangeUrl='+ encodeURI(encodeURI(arrangeUrl))+"&idphotoUrl="+encodeURI(encodeURI(idphotoUrl)); 	 
			layer.close(index);		
		})
	})

	// 规格点击事件
	$(document).on('click', '.specification .item', function() {
		$(this).addClass("active").siblings().removeClass("active");
	})
		
	// print-pictures-btn	
	$(document).on('click', '.print-pictures-btn', function() {
		if(!arrangeUrl){
			layer.msg("请上传原图");
			return false;
		}
		// count="9" width="25" height="35"
		var specification = $(".specification .item.active");
		var count = specification.attr("count");
		var width = specification.attr("width");
		var height = specification.attr("height");
		
		var printHtml = "";	
			printHtml+='<div class="print-pictures" >';								
			printHtml+='<image  src="'+arrangeUrl+'"/>';
			printHtml+='</div>';		
				
		 Print(printHtml, {
	        onStart: function () {
	          // console.log('onStart', new Date())
	        },	
	        onEnd: function () {
	          // console.log('onEnd', new Date())
	        }	
	     })
	})
	
	// 排版预览	arrange-preview-btn
	$(document).on('click', '.arrange-preview-btn', function() {
		if(!arrangeUrl){
			layer.msg("请上传原图");
			return false;
		}
		previewImg(arrangeUrl);
	})

	// 预览 图片
	function previewImg(url) {
        var img = new Image();  	
        img.src = url;	
        var imgHtml = "";			
        imgHtml += '<div style="text-align: center;">';
       	imgHtml += '<img class="preview-img" src=' + url + ' width="95%;" style="transform:rotate('+previewRotate+'deg);margin-top: 80px;" />';	
       	imgHtml += '</div>';	
       	imgHtml += '<div style="position: absolute; bottom: 20px; text-align: center; width: 100%;">';
        imgHtml += '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm left-rotate90">左旋转90</button>';
        imgHtml += '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm right-rotate90">右旋转90</button>';
    	imgHtml += '</div>';
        //弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [550 + 'px',700+'px'],
            shadeClose:true,
            scrollbar: false,
            title: "证件照拼板", //不显示标题  	
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }
	
	// 预览左旋转90
	$(document).on('click', '.left-rotate90', function() {
		previewRotate = previewRotate - 90;	
		$(".preview-img").css('transform', 'rotate(' + previewRotate + 'deg)');
	})
	
	
	// 预览又旋转90
	$(document).on('click', '.right-rotate90', function() {
		previewRotate = previewRotate + 90;	
		$(".preview-img").css('transform', 'rotate(' + previewRotate + 'deg)');
	})
		
	var indexLoad = null;
	function initWebUploader() {
		
		// 文件附件 初始化Web Uploader      
	 	var webUploaderObj = WebUploader.create({ 	 
	 		auto: true,		 						// 选完文件后，是否自动上传。	
			swf: '../../../resources/plugins/webuploader/Uploader.swf',		
			server: '/tool/photoMake',			// 文件接收服务端。	
			pick: '#filePicker', 					// 选择文件的按钮。可选   	内部根据当前运行是创建，可能是input元素，也可能是flash.
			// 只允许选择图片文件。
			accept: {
		        title: 'Images',
		        extensions: 'jpg,jpeg,png',
		        mimeTypes: 'image/*'
		    },
			//type: 'image/jpeg',
			//chunked: false, 							//是否要分片处理大文件上传  
			duplicate: true, 							//是否支持重复上传 	 
			// fileSizeLimit: 200 * 1024 * 1024,        // 2000 * 1024 * 1024 最大2GB   
			//chunkSize:2*1024*1024, 					//分片上传，每片2M，默认是5M    
			fileVal:"file",								// [默认值：'file'] 设置文件上传域的name。  
			// fileNumLimit: 1,							//限制上传个数		
			//fileSingleSizeLimit: 2048000 				//限制单个上传图片的大小
			compress:false							    //webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图
			// resize: false,	  							// 不压缩image 	 	
			// compressSize: 0  
		}); 

		// 验证文件格式以及文件大小 
		webUploaderObj.on("error", function (type,file) {
			if (type == "Q_TYPE_DENIED") {
				layer.msg("文件格式不支持");
			} else if (type == "Q_EXCEED_SIZE_LIMIT") {
				layer.msg("文件大小不能超过200M");
			}else if(type == "Q_EXCEED_NUM_LIMIT"){
				layer.msg("超过每次上传数量图片限制");
			}else if(type == "F_DUPLICATE"){
				layer.msg("文件重复");  
			} else {         
				layer.msg("上传出错！错误代码"+type);
			}       
		});     
		
		// fileQueued 事件是文件加入队列后触发的
		webUploaderObj.on( 'fileQueued', function( file) {
	        // 如果为非图片文件，可以不用调用此方法。
	        webUploaderObj.makeThumb( file, function( error, src ) {
	            if ( error ) {	
	                // $img.replaceWith('<span>不能预览</span>');
	                $(".pictures-container").empty().append('<span>不能预览</span>');	
	                return;
	            }	
	            //$img.attr( 'src', src );		
	            $(".pictures-container").empty().append('<img style="max-height: 220px;margin-top: 2px;"  width height  alt="" src="'+src+'">');
	        }, 1, 1 );	
		});
		// 上传前验证   
		webUploaderObj.on('beforeFileQueued', function (file) {
			
				
		});
		// 文件上传前处理请求参数   
		webUploaderObj.on('uploadBeforeSend', function (object, data , headers) {
			$(".create-container").empty().append('<p style="color: red;">正在制作中、请耐心等待</p>');
			//传入表单参数    	     
			var bgColorVal = $('input[name="bgColor"]:checked').val(); 
			// 规格 item active
			var specVal =$(".specification .nav-container .item.active").attr("spec");
			data.bgColor = bgColorVal;    
			data.spec = specVal; 
			// 动画加载		
			indexLoad = layer.load(3,{shade: [0.3,'#ddd']}); //添加laoding,0-2两种方式
			
		});     
		// 文件上传过程中创建进度条实时显示。   
		webUploaderObj.on( 'uploadProgress', function( file, percentage ) {
			// 进度条		  		                 	
		
		});     
		// 上传成功	    
		webUploaderObj.on( 'uploadSuccess', function( file,res) {
			if(res.code==200){		
				if(res.dataObject){
					var objInfo = JSON.parse(res.dataObject.idphoto);
					idphotoUrl = objInfo.data.result;		
					// 证件照数据					
					$(".create-container").empty().append('<img id=yourPic style="max-height: 220px;margin-top: 2px;" width="170px" height="400px" alt="" src="'+objInfo.data.result+'">');
					layer.msg("上传成功");				
					// 排版数据
					var arrangeInfo = JSON.parse(res.dataObject.arrange);
					// 打印的排版数据			
					arrangeUrl = arrangeInfo.data.result;	
				}else{		
					layer.msg(res.msg);		
					$(".create-container").empty().append('<p style="color: red;">'+res.msg+'</p>');
				}
			}else{
				layer.msg(res.msg);
			}	
			// 刷新上传插件
			webUploaderObj.reset();
		});    
		// 上传失败回调
		webUploaderObj.on( 'uploadError', function( file ) {
			
		}); 	
		// 不管上传成功还是失败都会执行
		webUploaderObj.on( 'uploadComplete', function( file ) {
			// 关闭动画
			layer.close(indexLoad);		
		});	
	}			

	</script>
</body>
</html>